<template>
    <nav class="navbar navbar-dark bg-primary justify-content-between mb-4">
        <a class="navbar-brand my-1" href="#">vansir</a>
        <ul class="mb-0">
            <li v-if="!user.isLogin" class="list-inline mb-0">
                <router-link to="/login" class="btn btn-outline-light mx-2">登录</router-link>
                <router-link to="/signUp" class="btn btn-outline-light mx-2">注册</router-link>
            </li>
            <li v-else class="list-inline-item mb-0">
                <Dropdown :title="`你好${user.nickName}`">
                    <DropdownItem><router-link to="/createPost">新建文章</router-link></DropdownItem>
                    <DropdownItem><a href="#">编辑资料</a></DropdownItem>
                    <DropdownItem><a @click="clickLogout" href="javascript:void(0)">退出登录</a></DropdownItem>
                </Dropdown>
            </li>
        </ul>
    </nav>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import Dropdown from "./Dropdown.vue";
import DropdownItem from "./DropdownItem.vue";
import { UserProps } from "@/store";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default defineComponent({
    components: {
        Dropdown,
        DropdownItem,
    },
    props: {
        user: {
            type: Object as PropType<UserProps>,
            required: true,
        },
    },
    setup(props) {
        const store = useStore();
        const router = useRouter();
        const clickLogout = () =>{
            store.commit("logout");
            router.go(0);
        }
        return {
            clickLogout
        };
    },
});
</script>

<style scoped></style>
